<template>
	<div class="headerWrap">
        <div class="leftArea verMiddle" v-if="false">
            <!--折叠测边栏-->
            <el-icon v-if="!isCollapse" @click="foldMet"><fold /></el-icon>
            <el-icon v-if="isCollapse" @click="expandMet"><expand /></el-icon>
        </div>
        <div class="breadCrumbArea">
            <breadCrumb></breadCrumb>
        </div>
        <div class="rightArea">
            <!--操作按钮区域-->
            <div class="rightIcon">
                <svgIcon @click="enlargeMet" name="enlarge"></svgIcon>
            </div>
            <!--头像区域-->
            <el-dropdown class="user-box">
                <div class="el-dropdown-link">
                    <img src="../../assets/login.jpeg" alt="" />
                    <span>admin</span>
                    <el-icon class="el-icon--right"><arrow-down /></el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人中心</el-dropdown-item>
                        <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
	</div>
</template>
<script type="text/javascript" lang="ts">
    import breadCrumb from "./breadcrumb.vue";
	export default{
		data () {
			return {
				isCollapse:false
			}
		},
		mounted (){

        },
        watch:{
            
        },
		components : {
			breadCrumb
		},
		methods : {
			loginOut(){
                //清除sessionStorage
                sessionStorage.removeItem("isLoginSuc");
                this.$router.push({name:"login"});
            },
            foldMet(){
                this.isCollapse = true;
                this.$emit("isCollapse",this.isCollapse);
            },
            expandMet(){
                this.isCollapse = false;
                this.$emit("isCollapse",this.isCollapse);
            },
            enlargeMet(){
                this.$fullscreen.toggle()
            }
		}
	}
</script>
<style type="text/css" lang="less">
	.headerWrap{
        width: 100%;
        height: 100%;
        position: relative;
        left: 0;
        right: 0;
        overflow: hidden;
        .leftArea{
            float: left;
            height: 100%;
            .el-icon{
                vertical-align: middle;
                cursor: pointer;
            }
        }
        .breadCrumbArea{
            float: left;
            height: 100%;
        }
        .rightArea{
            float: right;
            width:400px;
            height: 100%;
            padding: 0 10px;
            display: flex;
            align-items: center;
            .el-icon{
                vertical-align: middle;
            }
        }
        .rightIcon{
            flex:4;
            text-align:right;
            box-sizing:border-box;
            padding-right:10px;
            display:flex;
            flex-direction:row-reverse;
            svg{
                width:22px;
                height:22px;
                cursor:pointer;
                margin-left:25px;
                stroke: red;
                use{
                    fill:#4E5A69;
                }
            }
        }
        .user-box {
            flex:2;
            cursor: pointer;
            text-align: right;
            img {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                border: 1px solid #ccc;
                vertical-align: middle;
                margin-right: 8px;
            }
            > span {
                display: inline-block;
                margin: 0 10px;
                font-size: 14px;
                vertical-align: middle;
            }
        }
    }
</style>